<template>
  <view>
    <view
        v-if="show"
        @click="close"
        class="back"></view>
    <u-popup
        mode="bottom"
        bgColor="rgba(0,0,0,0)"
        overlay-opacity="0"
        zIndex="999999"
        :show="show" @close="close" @open="open"
    >

      <view class="box">
        <view style="height: 20rpx"></view>
        <view class="title">
          选择等次
        </view>
        <view style="height: 20rpx"></view>
        <scroll-view
            style="max-height: 500rpx"
            scroll-y>
        <view v-for="item in 6"
        v-show="item!==0"
         class="in-box"
          @click="change(item)"
        >
          {{item}}等奖
        </view>
        </scroll-view>
      </view>


    </u-popup>
  </view>
</template>

<script>

export default {
  props: {
    userInfo:{
      type: Object,
      default: () => {
        return {
          gmtBirthday: 0,
          genderCode:"male"
        };
      }
    }
  },

  data() {
    return {
      show: false,
      mode: "single",
      indexIndex: 0,
      selected: 0,
    };
  },
  mounted() {
  },
  methods:{
    open(index){
      if(index===0||index) {
        this.indexIndex = index;
        this.show = true;
        this.$emit("open");
      }
    },
    close(){
      this.show = false;
      this.$emit("close");
    },
    change(item){
      this.selected = item;
      setTimeout(()=>{
        this.$emit("change",this.selected,this.indexIndex);
      },100);
      this.close();
    }
  }
}
</script>

<style lang="scss" scoped>
.back{
  position: fixed;
  z-index: 999999;
  background-color: rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.box{
  position: relative;
  background-color: #FFFFFF;
  padding: 0 20rpx 20rpx 20rpx;
  box-shadow: 0 10rpx 10rpx rgba(118, 118, 118, 0.1);
  border-radius: 20rpx 20rpx 0 0;
  text-align: center;
}

.in-box{
  position: relative;
  padding: 20rpx;
  box-sizing: border-box;
  font-size: 33rpx;
  letter-spacing: 2rpx;

}

.in-box:active{
  opacity: .5;
}
.text{
  position: absolute;
  display: inline-block;
  right: 0;
  font-size: 22rpx;
}
</style>
